<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-loading="loading" class="tree-card">
        <!-- 头部组件 -->
        <tree-tools
          :tree-node="company"
          is-root
          @addDept="addDept"
        />
        <!-- 组织架构的树形组件 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 作用域插槽 -->
          <template #default="{data}">
            <tree-tools
              :tree-node="data"
              @delDept="getDepartments"
              @addDept="addDept"
              @editDept="editDept"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 添加部门组件 -->
      <!--
        // 1. 父组件放权让子组件能够修改定义在props中属性的属性值
        // 2. 并且能够同时影响父组件中对应属性的属性值
       -->
      <add-dept
        ref="addDept"
        :show-dialog.sync="showAddDialog"
        :tree-node="node"
        @addDept="getDepartments"
      />
    </div>
  </div>
</template>

<script>
// 1. 引入组件
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
// 2. 引入接口
import { getDepartments } from '@/api/departments'

import { tranListToTreeData } from '@/utils'
export default {
  name: 'Department',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // 1. 树形组件的数据数组
      departs: [],
      // 2. 公司的信息对象
      company: {},
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 3. 控制添加弹窗的显示和隐藏
      showAddDialog: false,
      // 4. 要添加子部门的父级部门
      node: null,
      // 5. 加载圈
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 1. 获取组织架构数据
    async getDepartments() {
      this.loading = true
      // 1.1 请求接口
      const { companyName, depts } = await getDepartments()
      // 1.2 数据赋值
      this.company = { name: companyName, manager: '负责人', id: '' }
      // 1.3 把对象数组转成树形数组
      this.departs = tranListToTreeData(depts, '')
      this.loading = false
    },
    // 2. 处理添加部门操作
    addDept(node) {
      // 2.1 记录父级部门的数据对象
      this.node = node
      // 2.2 让添加部门展示
      this.showAddDialog = true

      // this.$refs.addDept.showTitle = '添加部门'
    },
    // 3. 处理编辑部门操作
    editDept(node) {
      // 3.1 记录父级部门的数据对象
      this.node = node
      // 3.2 让添加部门展示
      this.showAddDialog = true
      // 3.3 调用子组件中的方法
      this.$refs.addDept.getDepartDetail(node.id)
      // console.log(this.$refs.addDept)

      // this.$refs.addDept.showTitle = '编辑部门'
    }
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px  40px;
  font-size:14px;
}

.el-tree {
  // 深度穿透选择器
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
